<template>
	<view class="item-container">
		<view class="item-box">
			<!-- 左侧 -->
			<view class="item-box-left">
				<!-- 排名 -->
				<hot-ranking :ranking="ranking" />
			</view>
			<!-- 右侧 -->
			<view class="item-box-right">
				<!-- 标题 -->
				<view class="item-title line-clamp-2">{{ data.title }}</view>
				<!-- 简介 -->
				<view class="item-desc line-clamp-2">{{ data.desc }}</view>
				<!-- 底部 -->
				<view class="item-bottom-box">
					<!-- 作者 -->
					<text class="item-author">{{ data.nickname }}</text>
					<!-- 热度 -->
					<view class="hot-box">
						<image class="hot-icon" src="@/static/images/hot-icon.png" />
						<text class="hot-text">{{ data.views | hotNumber }} 热度</text>
					</view>
					<view>{{ time | formatDate }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "hot-list-item",
	props: {
		// item 数据
		data: {
			type: Object,
			required: true
		},
		// 排名
		ranking: {
			type: Number,
			required: true
		}
	},
	data() {
		return {
			time: "2024-02-22 03:00:00"
			// time: 1708542020334
			// time: "1708542413651"



		};
	}
}
</script>

<style lang="scss" scoped>
.item-container {
	padding-bottom: $uni-spacing-col-lg;

	.item-box {
		display: flex;
		margin: 0 $uni-spacing-row-base;
		padding: $uni-spacing-col-lg $uni-spacing-row-base;
		background-color: $uni-bg-color;
		border-radius: $uni-border-radius-lg;
		box-shadow: 2px 2px 5px 1px rgba(143, 143, 143, 0.1);

		.item-box-left {
			margin-right: $uni-spacing-row-sm;
		}

		.item-box-right {
			width: 100%;
			// 文字超出宽度自动换行
			word-wrap: break-word;
			word-break: break-all;

			.item-title {
				font-size: $uni-font-size-lg;
				font-weight: bold;
				color: $uni-text-color;
			}

			.item-desc {
				padding-top: $uni-spacing-col-sm;
				font-size: $uni-font-size-base;
				color: $uni-text-color;
			}

			.item-bottom-box {
				margin-top: $uni-spacing-col-sm;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item-author {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}

				.hot-box {
					.hot-icon {
						width: $uni-img-size-sm;
						height: $uni-img-size-sm;
						vertical-align: top;
					}

					.hot-text {
						margin-left: $uni-spacing-row-sm;
						font-size: $uni-font-size-sm;
						color: $uni-text-color-active;
					}
				}
			}
		}
	}
}
</style>
